require(['./config'], () => {
  require(['template','header', 'footer', 'jquery', 'bootstrap'], (template) =>{
    class Shopping {
      constructor () {
        this.render()
        this.calcTotalMoney()
        this.setAllCheckStatus()
        this.checkChange()
        this.addCount()
        this.subCount()
        this.delete()
      }
      // 渲染页面
      render () {
        // 根据localStorage的数据渲染购物车列表
        const cart = localStorage.getItem('cart')
        if (cart) {
          this.cart = JSON.parse(cart)
          $('#shop_tbody').html(template('shop_tbody_template', { cart: this.cart }))
        } else {
          $('.panel-default').hide()
          $('#cart-empty').show()
        }
      }
      // 算总价
      calcTotalMoney () {
        // 无论用户做了任何对于总价有影响的操作，都直接调用这个方法即可
        const total = this.cart.reduce((money, shop) => {
          if (shop.check) money += shop.price * shop.count
          return money
        }, 0)
        $('#Paymoney').html(total.toFixed(2))
      }
      // 全选状态
      setAllCheckStatus () {
        const isAllCheck = this.cart.every(shop => shop.check)
        $('#all-check').prop('checked', isAllCheck)
      }
      checkChange() {
        const _this = this
        $('.checks').on('change',function() {
          // 改数据
          // 存localStorage
          // 更改DOM
          const id = $(this).parents('tr').data('id')
          _this.cart = _this.cart.map(shop => {
            if(shop.id === id) shop.check = $(this).prop('checked')
            return shop 
          })
          localStorage.setItem('cart', JSON.stringify(_this.cart))
          _this.setAllCheckStatus()
          _this.calcTotalMoney()
        })
      }
      addCount() {
        const _this = this
        $('.addNum').on('click',function() {
          // 数量加一
          $(this).prev().val(Number($(this).prev().val())+1)
          // console.log(Number($(this).prev().val()))
          // console.log(Number($(this).parents('tr').find('.money').text()))
          // 这一行的总价
          let rowPrice = Number($(this).prev().val()) * Number($(this).parents('tr').find('.money').text())
          console.log(rowPrice.toFixed(2))
          $(this).parents('tr').find('.rowPrice').html(rowPrice.toFixed(2))
          const id = $(this).parents('tr').data('id')
          _this.cart = _this.cart.map(shop => {
            if(shop.id === id) shop.count = $(this).prev().val()
            return shop
          })
          localStorage.setItem('cart', JSON.stringify(_this.cart))
          _this.setAllCheckStatus()
          _this.calcTotalMoney()
        })
      }
      subCount() {
        const _this = this
        $('.subNum').on('click',function() {
          // $(this).val()--
          if(Number($(this).next().val()) > 1) {
            $(this).next().val(Number($(this).next().val())-1)
            // 这一行的总价
            let rowPrice = Number($(this).next().val()) * Number($(this).parents('tr').find('.money').text())
            $(this).parents('tr').find('.rowPrice').html(rowPrice.toFixed(2))
            
            const id = $(this).parents('tr').data('id')
            _this.cart = _this.cart.map(shop => {
              if(shop.id === id) shop.count = $(this).next().val()
              return shop
            })
            localStorage.setItem('cart', JSON.stringify(_this.cart))
            _this.setAllCheckStatus()
            _this.calcTotalMoney()
          } else{
            $(this).prop('disabled')
          }
        })
      }
      delete() {
        const _this = this
        $('.del').on('click',function() {
          if(confirm('你确定要从购物车移除本件商品？')) {
            const id = $(this).parents('tr').data('id')
            _this.cart = _this.cart.filter(shop => {
              if(shop.id != id)
              return shop 
            })
            localStorage.setItem('cart', JSON.stringify(_this.cart))
            _this.setAllCheckStatus()
            _this.calcTotalMoney()
          }
        })
      }
      // 算每件商品的总价
      // singleAllPrice() {

      // }
    }
    new Shopping()
  })
})